<template>
<div class="container-editeInformation">
  <el-form ref="informationForm" :model="informationForm" label-width="80px" :rules="rules">
  <el-form-item label="站点名称" prop="siteName">
    <el-input v-model="informationForm.siteName"></el-input>
  </el-form-item>
  <el-form-item label="所在县" prop="county">
    <el-input v-model="informationForm.county"></el-input>
  </el-form-item>
  <el-form-item label="快递公司" prop="courierCompany">
    <!-- <el-input v-model="informationForm.courierCompany"></el-input> -->
     <el-select v-model="informationForm.courierCompany" filterable placeholder="请选择快递">
      <el-option
        v-for="item in courierList"
        :key="item.value"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="发出数" prop="sendNumber">
    <el-input v-model="informationForm.sendNumber"></el-input>
  </el-form-item>
  <el-form-item label="进入数" prop="accessNumber">
    <el-input v-model="informationForm.accessNumber"></el-input>
  </el-form-item>
  <el-form-item label="时间" prop="recordTime">
    <el-date-picker
      v-model="informationForm.recordTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
     >
    </el-date-picker>
  </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    <el-button @click="resetInformation">重置</el-button>
  </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  props: {
    editeOption: {
      type: Object,
      required: {}
    }
  },
  data () {
    const checkCounty = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('所在县不能为空'))
      }
      callback()
    }
    const checkCourierCompany = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('快递公司不能为空'))
      }
      callback()
    }
    const checkSendNumber = (rule, value, callback) => {
      if (!/^\d+$/.test(value)) {
        callback(new Error('发出数只能为正整数'))
      } else {
        callback()
      }
    }
    const checkAccessNumber = (rule, value, callback) => {
      if (!/^\d+$/.test(value)) {
        callback(new Error('进入数量只能为正整数'))
      } else {
        callback()
      }
    }
    const CheckSiteName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('站点不能为空'))
      }
      callback()
    }
    const CheckRecordTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('时间不能为空'))
      }
      callback()
    }
    return {
      informationForm: {
        id: '',
        recordTime: '',
        county: '',
        courierCompany: '',
        sendNumber: '',
        accessNumber: '',
        siteName: ''
      },
      courierList: [],
      formData: {},
      rules: {
        county: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { validator: checkCounty, trigger: 'blur' }
        ],
        sendNumber: [
          { required: true, message: '请输入发出数量', trigger: 'blur' },
          { validator: checkSendNumber, trigger: 'blur' }
        ],
        courierCompany: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { validator: checkCourierCompany, trigger: 'blur' }
        ],
        accessNumber: [
          { required: true, message: '请输入接收数量', trigger: 'blur' },
          { validator: checkAccessNumber, trigger: 'blur' }
        ],
        siteName: [
          { required: true, message: '请输入站点名称', trigger: 'blur' },
          { validator: CheckSiteName, trigger: 'blur' }
        ],
        recordTime: [{ validator: CheckRecordTime, trigger: 'change' }]
      }
    }
  },
  mounted () {
    this.getInformation()
  },
  watch: {
    editeOption: {
      handler: function (newVal) {
        this.formData = newVal
        this.informationForm = this.formData
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 加载父组件传递过来的数据
    async getInformation () {
      // console.log(this.formData)
      // this.formData = this.editeOption
      this.informationForm = this.formData
      // 获取物流下拉框数据
      const res = await this.$http.get('/api/platApi/wuLiu/sysExpressCompany/listData')
      this.courierList = res.data.data
    },
    onSubmit () {
      this.$refs.informationForm.validate(async valid => {
        if (valid) {
          const res = await this.$http({
            url: '/api/platApi/wuLiu/siteLogisticsData/update',
            method: 'post',
            data: this.informationForm
          })
          if (res.status === 200 && res.data.code === 1) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.$emit('closeDialog')
            this.$refs.informationForm.resetFields()
          } else {
            this.$message.error('更新失败')
          }
          // Object.assign(this.informationForm, this.$options.data().informationForm)
        } else {
          return false
        }
      })
    },
    resetInformation () {
      this.$refs.informationForm.resetFields()
      // Object.assign(this.informationForm, this.$options.data().informationForm)
    }
  }
}
</script>

<style scoped lang="less">
.el-form{
    margin: 0 6%;
    .el-button{
      margin-left: 10%;
    }
}
</style>
